<template>
  <div class="v-modal" :class="{show}">
    <div class="mask" :style="{backgroundColor:maskColor}" v-if="'mask' in $attrs" @click="'closable' in $attrs&&close()"></div>
    <div class="content">
      <slot/>
    </div>
  </div>
</template>

<script>
let modals = document.querySelector("body>#v-modals");
export default {
  props: {
    maskColor: {
      default: "#000000"
    }
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    }
  },
  mounted() {
    modals = modals || document.body.appendChild(document.createElement("div"));
    modals.appendChild(this.$el).parentNode.id = "v-modals";
  },
  destroyed() {
    modals.removeChild(this.$el);
  }
};
</script>

<style lang="less">
.v-modal {
  > .mask {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    position: fixed;
    visibility: hidden;
    transition: 300ms;
  }
  &.show {
    &[mask] {
      > .mask {
        opacity: 0.5;
        visibility: visible;
      }
    }
  }
}
</style>

